<template>
  <div id="view">
    <better-scroll class="tab-page-wrapper" style="bottom: 66px">
      <div class="page-bg" v-if="user.gridPersonType != '5'"></div>
      <div class="tab-page">
        <router-view></router-view>
      </div>
    </better-scroll>
    <van-tabbar fixed route v-model="active">
      <van-tabbar-item replace v-for="(item, key) in tabBar" :key="key" @click="$router.push(item.path)">
        <span>{{ item.text }}</span>
        <template #icon>
          <img :src="$route.path === item.path ? item.selectedIconPath : item.iconPath" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  data() {
    return {
      active: 0,
      tabBar: [
        {
          text: '首页',
          iconPath: require('@/assets/images/index/tab_homepage_nor@2x.png'),
          selectedIconPath: require('@/assets/images/index/tab_homepage_foc@2x.png'),
          path: '/home'
        },
        {
          text: '日志上报',
          iconPath: require('@/assets/images/index/tab_log_nor@2x.png'),
          selectedIconPath: require('@/assets/images/index/tab_log_foc@2x.png'),
          path: '/routine/log/report'
        },
        {
          text: '事件上报',
          iconPath: require('@/assets/images/index/tab_ereport_nor@2x.png'),
          selectedIconPath: require('@/assets/images/index/tab_ereport_foc@2x.png'),
          path: '/event/report'
        },
        {
          text: '我的',
          iconPath: require('@/assets/images/index/tab_my_nor@2x.png'),
          selectedIconPath: require('@/assets/images/index/tab_my_foc@2x.png'),
          path: '/my'
        }
      ],
      manageTabBar: [
        {
          text: '首页',
          iconPath: require('@/assets/images/index/tab_homepage_nor@2x.png'),
          selectedIconPath: require('@/assets/images/index/tab_homepage_foc@2x.png'),
          path: '/cockpit/home'
        },
        {
          text: '督办',
          iconPath: require('@/assets/images/index/tab_log_nor@2x.png'),
          selectedIconPath: require('@/assets/images/index/tab_log_foc@2x.png'),
          path: '/cockpit/supervise'
        },
        {
          text: '资讯',
          iconPath: require('@/assets/images/index/tab_ereport_nor@2x.png'),
          selectedIconPath: require('@/assets/images/index/tab_ereport_foc@2x.png'),
          path: '/event/report'
        },
        {
          text: '我的',
          iconPath: require('@/assets/images/index/tab_my_nor@2x.png'),
          selectedIconPath: require('@/assets/images/index/tab_my_foc@2x.png'),
          path: '/my'
        }
      ]
    }
  },
  computed: {
    ...mapState({
      user: state => state.userInfo
    })
  },
  created() {
    localStorage.removeItem('tabSevle')
    if (this.user.gridPersonType === '5') this.tabBar = this.manageTabBar
  }
}
</script>
<style lang="less" scoped></style>
